<template>
  <div class=" info">
    <div class="companyIndex">
      <div class="w_100 headTips d_f j_c_s_b">
        <div class="d_f a_i_c">
          <div class="line"></div>
          公司基本信息
        </div>

        <el-button type="primary" @click="chnageDisabled" :disabled="disabled">编 辑</el-button>
      </div>
      <div class="formBox companyBox">
        <div class="formArrow d_f a_i_c">
          <img src="../../../assets/formArrow.png" alt="">
          <span>基本信息</span>
        </div>
        <myform :fields="fields" :rules="rules" ref="form1" :model="model" :options="options" class="m_t_16">
        </myform>
        <div class="segment"></div>
        <div class="formArrow d_f a_i_c">
          <img src="../../../assets/formArrow.png" alt="">
          <span>分支机构</span>
        </div>
        <div class="companyInfo_form">
          <div class="d_f a_i_c j_c_s_b m_t_20">
            <div style="width: 90%;" class="institution">机构名称</div>
            <div style="width: 26px;"></div>
          </div>
          <div v-for="(item, index) in model.agencyList" class="d_f m_t_20 a_i_c j_c_s_b" :key="index">
            <div style="width: 90%;">
              <el-input v-model="item.name" :disabled="!disabled" placeholder="请输入机构名称" />
            </div>


            <div style="width: 26px;" class="d_f a_i_c">
              <img src="../../../assets/reduce.png" alt="" @click="reduce(index)" class="reduce" v-if="index > 0">
            </div>
          </div>
          <div class="d_f a_i_c j_c_s_b m_t_20">
            <div style="width: 90%;"></div>
            <div style="width: 26px;" @click="add">
              <img src="../../../assets/add.png" alt="" class="reduce">
            </div>
          </div>
        </div>
        <div class="segment"></div>
        <div class="formArrow d_f a_i_c">
          <img src="../../../assets/formArrow.png" alt="">
          <span>人事信息</span>
        </div>
        <myform :fields="fields1" @handleInput="handleInput" :rules="rules" ref="form2" :model="model" :options="options" class="m_t_16">
        </myform>
      </div>
    </div>
    <div class="d_f j_c_s_b m_t_20">
      <div></div>
      <el-button type="primary" @click="save" :disabled="!disabled">保 存</el-button>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { statisticalCompanyInfo ,statisticalCompanyAdd} from '../../../api/report'
import { INTEGER, FUND_REG } from '../../../utils//regular'
import { Message } from '../../../utils/resetMessage'
import { companyInfoType } from '../../../type/report'
export default defineComponent({
  name: '',
  setup() {
    const data:companyInfoType = reactive({
      model: {
        agencyList: [
         {
          name:'',
         }
        ],
        name: "",//公司全称
        legalPerson: "",//实际控制人
        nature: 1,//机构性质
        type: 1,//机构类型
        registeredCapital: '',//注册资本
        paidCapital: '',//实收资本
        netAssets: '',//净资产
        allNetAssets: '',//资产总额
        liability: '', //负债总额
        isGovernment: '1',//是否政府。。。机构
        available: '', //可用货币资金
        level: '',//等级
        reserve: '',//担保准备金
        businessNo: "",//经营许可证号
        establishmentTime: "",//成立时间
        employees: '',//从业人员
        bkemployees: '',//本科生         
        yjsemployees: '',//研究生
        dzemployees: '',
      },
      options: {
        nature: [
          {
            name: '国有资本完全控股',
            id: 1
          },
          {
            name: '国有控股民营参股',
            id: 2
          },
          {
            name: '民营及外资',
            id: 3
          },
        ],
        type: [
          {
            name: '融资担保机构',
            id: 1
          },
          {
            name: '融资再担保机构',
            id: 2
          },
        ],
        isGovernment: [
          {
            name: '是',
            id: '1'
          },
          {
            name: '否',
            id: '0'
          },
        ],
        level: [
          {
            name: 'AAA',
            id: 1
          },
          {
            name: 'AA',
            id: 2
          },
          {
            name: 'A',
            id: 3
          },
          {
            name: 'BBB',
            id: 4
          },
          {
            name: 'BB',
            id: 5
          },
          {
            name: 'B',
            id: 6
          },
          {
            name: 'CCC',
            id: 7
          },
          {
            name: 'CC',
            id: 8
          },
          {
            name: 'C',
            id: 9
          },
          {
            name: 'D',
            id: 10
          },
          {
            name: '未评级',
            id: 11
          },
        ],
      },
      fields: [
        {
          label: "公司全称",
          prop: 'name',
          placeholder: '请输入公司全称',
          type: 'input',
          labelWidth: '130px',
          disabled: true,
        },
        {
          label: "公司简称",
          prop: 'simpleName',
          placeholder: '请输入公司简称',
          type: 'input',
          labelWidth: '130px',
          disabled: true,
        },
        {
          label: "实际控制人",
          prop: 'legalPerson',
          placeholder: '请输入实际控制人',
          type: 'input',
          labelWidth: '130px',
          disabled: true,
        },
        {
          label: "机构性质",
          prop: 'nature',
          type: 'radio',
          labelWidth: '130px',
          disabled: true,
        },
        {
          label: "机构类型",
          prop: 'type',
          type: 'radio',
          labelWidth: '130px',
          disabled: true,
        },
        {
          label: "注册资本",
          prop: 'registeredCapital',
          placeholder: '请输入注册资本',
          type: 'number',
          labelWidth: '130px',
          unit: '万元',
          disabled: true,
        },
        {
          label: "实收资本",
          prop: 'paidCapital',
          placeholder: '请输入实收资本',
          type: 'number',
          unit: '万元',
          labelWidth: '130px',
          disabled: true,
        },
        {
          label: "净资产",
          prop: 'netAssets',
          placeholder: '请输入净资产',
          type: 'number',
          unit: '万元',
          labelWidth: '130px',
          disabled: true,
        },
        {
          label: "资产总额",
          prop: 'allNetAssets',
          placeholder: '请输入资产总额',
          type: 'number',
          unit: '万元',
          labelWidth: '130px',
          disabled: true,
        },
        {
          label: "负债总额",
          prop: 'liability',
          placeholder: '请输入负债总额',
          type: 'number',
          unit: '万元',
          labelWidth: '130px',
          disabled: true,
        },
        {
          label: "是否为政府性融资担保机构",
          prop: 'isGovernment',
          type: 'radio',
          labelWidth: '130px',
          disabled: true,
        },
        {
          label: "监管评级",
          prop: 'level',
          placeholder: '请选择监管评级',
          type: 'select',
          bindLabel: 'name',
          bindValue: 'id',
          labelWidth: '130px',
          disabled: true,
        },
        {
          label: "可用货币资金",
          prop: 'available',
          placeholder: '请输入可用货币资金',
          type: 'number',
          unit: '万元',
          labelWidth: '130px',
          disabled: true,
        },
        {
          label: "担保准备金",
          prop: 'reserve',
          placeholder: '请输入担保准备金',
          type: 'number',
          unit: '万元',
          labelWidth: '130px',
          disabled: true,
        },
        {
          label: "经营许可证编号",
          prop: 'businessNo',
          placeholder: '请输入经营许可证编号',
          type: 'input',
          labelWidth: '130px',
          disabled: true,
        },
        {
          label: "成立时间",
          prop: 'establishmentTime',
          placeholder: '请选择成立时间',
          type: 'date',
          labelWidth: '130px',
          disabled: true,
        },
      ],
      fields1: [
        {
          label: "从业人数",
          prop: 'employees',
          placeholder: '请输入从业人数',
          type: 'number',
          unit: '人',
          labelWidth: '130px',
          disabled: true,
        },
        {
          label: "研究生人数",
          prop: 'yjsemployees',
          placeholder: '请输入研究生人数',
          type: 'number',
          unit: '人',
          labelWidth: '130px',
          disabled: true,
        },
        {
          label: "本科生人数",
          prop: 'bkemployees',
          placeholder: '请输入本科生人数',
          type: 'number',
          unit: '人',
          labelWidth: '130px',
          disabled: true,
        },
        {
          label: "大专及以下人数",
          prop: 'dzemployees',
          placeholder: '请输入大专及以下人数',
          type: 'number',
          unit: '人',
          labelWidth: '130px',
          disabled: true,
        },
      ],
      rules: {
        name: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
        ],
        simpleName:[
        { required: true, message: '请输入公司简称', trigger: 'blur' },
      {max:6,message: '公司简称不能超过6位',}
        ],
        legalPerson: [
          { required: true, message: '请输入实际控制人', trigger: 'blur' },
        ],
        nature: [
          { required: true, message: '请选择机构性质', trigger: 'change' },
        ],
        type: [
          { required: true, message: '请选择机构类型', trigger: 'change' },
        ],
        registeredCapital: [
          { required: true, message: '请输入注册资本', trigger: 'blur' },
          { pattern: FUND_REG, message: '注册资本格式不正确' }
        ],
        paidCapital: [
          { required: true, message: '请输入实收资本', trigger: 'blur' },
          { pattern: FUND_REG, message: '实收资本格式不正确' }
        ],
        netAssets: [
          { required: true, message: '请输入净资产', trigger: 'blur' },
          { pattern: FUND_REG, message: '净资产格式不正确' }
        ],
        allNetAssets: [
          { required: true, message: '请输入资产总额', trigger: 'blur' },
          { pattern: FUND_REG, message: '资产总额格式不正确' }
        ],
        liability: [
          { required: true, message: '请输入负债总额', trigger: 'blur' },
          { pattern: FUND_REG, message: '负债总额格式不正确' }
        ],
        isGovernment: [
          { required: true, message: '请选择产是否为政府性融资担保机构', trigger: 'change' },
        ],
        // level: [
        //   { required: true, message: '请选择监管评级', trigger: 'change' },
        // ],
        available: [
          { required: true, message: '请输入可用货币资金', trigger: 'blur' },
          { pattern: FUND_REG, message: '可用货币资金格式不正确' }
        ],
        reserve: [
          { required: true, message: '请输入担保准备金', trigger: 'blur' },
          { pattern: FUND_REG, message: '担保准备金格式不正确' }
        ],
        businessNo: [
          { required: true, message: '请输入经营许可证号', trigger: 'blur' },
        ],
        establishmentTime: [
          { required: true, message: '请选择成立时间', trigger: 'change' },
        ],
        employees: [
          { required: true, message: '请输入从业人数', trigger: 'blur' },
          { pattern: INTEGER, message: '从业人数格式不正确' }
        ],
        yjsemployees: [
          { required: true, message: '请输入研究生人数', trigger: 'blur' },
          { pattern: INTEGER, message: '研究生人数格式不正确' }
        ],
        bkemployees: [
          { required: true, message: '请输入本科生人数', trigger: 'blur' },
          { pattern: INTEGER, message: '本科生人数格式不正确' }
        ],
        dzemployees: [
          { required: true, message: '请输入大专生人数', trigger: 'blur' },
          { pattern: INTEGER, message: '大专生人数格式不正确' }
        ],
      },
      disabled: false,
    })
    onBeforeMount(() => {
      methods.getData()
    })
    const form1 = ref()
    const form2 = ref()
    const methods = {
      getData() {
        statisticalCompanyInfo({ id: '' }).then(res => {
          if(!res)return
          for(let i in res){
            if(res[i]){
              data.model[i]=res[i]
            }
             
          }
          data.model.isGovernment = String(data.model.isGovernment)
        })
      },
      add() {
        if(!data.disabled)return
        data.model.agencyList.push({ name: '' })
      },
      reduce(index: number) {
        if(!data.disabled)return
        data.model.agencyList.splice(index, 1)
      },
      save() {
        form1.value.verification().then(() => {
          form2.value.verification().then(() => {
            statisticalCompanyAdd(data.model).then(()=>{
              Message({type:'success',message:'操作成功'})
            })
          })
        })
      },
      handleInput(){
        let bkemployees=0
        if(data.model.bkemployees){
          bkemployees=Number(data.model.bkemployees)
        }
        let yjsemployees=0
        if(data.model.yjsemployees){
          yjsemployees=Number(data.model.yjsemployees)
        }
        let dzemployees=0
        if(data.model.dzemployees){
          dzemployees=Number(data.model.dzemployees)
        }
        data.model.employees=String(bkemployees+yjsemployees+dzemployees)
      },
      chnageDisabled(){
        data.disabled=!data.disabled
        data.fields.map(item=>{
          item.disabled=!data.disabled
        })
        data.fields1.map(item=>{
          item.disabled=!data.disabled
        })
      }
    }
    return {
      ...toRefs(data),
      ...methods, form1, form2
    }
  }
})
</script>
<style lang='scss'>
.companyIndex {
  width: 100%;
  height: calc(100% - 60px);
  background: #fff;
  overflow-y: auto;
  .institution{
    color: rgba(0, 0, 0, 0.4);
    font-size: 14px;
  }
}

.info {
  background: #fff;
  padding: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
}

.companyBox {
  .el-form-item {
    width: 50% !important;
    margin-right: 0px !important;

    .el-form-item__content {
      width: calc(100% - 130px) !important;

      .el-input,
      .el-cascader,
      .el-select {
        width: 100% !important;
      }
    }

  }
  .el-form-item:nth-child(11){
  .el-form-item__label{
    line-height:20px;
  }
  }
}

.companyInfo_form {
  width: 80%;
  margin-left: 10%;

  .el-input {
    width: 100% !important;
  }

  .reduce {
    width: 26px;
    height: 26px;
    cursor: pointer;
  }
}
</style>